/*
 * 场地编辑
 * @Author: ice
 * @Date: 2018-10-15 14:27:22
 * @Last Modified by: ice
 * @Last Modified time: 2018-10-16 17:06:03
 */
<template>
    <div class="container edit-place-container">
        <!-- 无编辑权限或者新增权限,隐藏操作栏 -->
        <div
            class="operate-bar"
            v-if="(!formData.area_no && authResult.auth_save) || (formData.area_no && authResult.auth_edit)">
            <el-button
                size="mini"
                @click="fnGoList()">取消</el-button>
            <el-button
                size="mini"
                @click="fnClear()">清空</el-button>
            <el-button
                type="primary"
                size="mini"
                @click="fnSave()">保存</el-button>
        </div>
        <!-- 无错操作栏时, 高度调整 -->
        <div
            class="base-main"
            :class="{'no-operater': !(!formData.area_no && authResult.auth_save) || (formData.area_no && authResult.auth_edit)}">
            <el-form
                ref="mainform"
                :model="formData"
                status-icon
                :rules="formRule"
                label-width="0">
                <el-card class="box-card">
                    <div
                        slot="header"
                        class="clearfix card-header">
                        <span>校区信息</span>
                    </div>
                    <div
                        class="card-content"
                        :class="{'show-edit': true, 'uneditable-wrap': false }">
                        <div class="info-wrap">
                            <div class="info-unit">
                                <div class="info-label ">
                                    <span>所在城市</span>
                                </div>
                                <div class="info-value">
                                    <el-form-item prop="prov_city">
                                        <el-cascader
                                            clearable
                                            :options="regin"
                                            expand-trigger="hover"
                                            :change-on-select="true"
                                            size="small"
                                            :filterable="true"
                                            class="info-input"
                                            v-model="formData.prov_city"
                                            :props="{
                                                label: 'name',
                                                value: 'id',
                                                children: 'children'
                                            }"
                                            @change="fnGetSchools()" />
                                    </el-form-item>
                                </div>
                            </div>
                            <div class="info-unit">
                                <div class="info-label">
                                    <span>大学</span>
                                </div>
                                <div class="info-value">
                                    <el-form-item prop="school_id">
                                        <el-select
                                            size="small"
                                            v-model="formData.school_id"
                                            filterable
                                            class="info-input"
                                            placeholder="请选择"
                                            @change="fnGetSchoolAreas">
                                            <el-option
                                                v-for="item in schools"
                                                :key="item.school_id "
                                                :label="item.name"
                                                :value="item.school_id" />
                                        </el-select>
                                    </el-form-item>
                                </div>
                            </div>
                            <div class="info-unit">
                                <div class="info-label">
                                    <span>校区</span>
                                    <span/>
                                    <el-button
                                        v-if="authResult.auth_add_school_area"
                                        class="btn-nopadding"
                                        type="text"
                                        @click="fnShowAddSchoolAreaDialog">+添加校区</el-button>
                                </div>
                                <div class="info-value">
                                    <el-form-item prop="school_area_no">
                                        <el-select
                                            size="small"
                                            class="info-input"
                                            v-model="formData.school_area_no"
                                            filterable
                                            placeholder="请选择"
                                            @change="fnGetSchoolArea">
                                            <el-option
                                                v-for="item in school_areas"
                                                :key="item.school_area_no "
                                                :label="item.school_area_name"
                                                :value="item.school_area_no" />
                                        </el-select>
                                    </el-form-item>
                                </div>
                            </div>

                            <div class="info-unit">
                                <div class="info-label">
                                    人数
                                </div>
                                <div class="info-value">
                                    <el-form-item prop="sa_student_count">
                                        <el-input
                                            v-model="formData.sa_student_count"
                                            type="number"
                                            size="small"
                                            class="info-input" />
                                    </el-form-item>
                                </div>
                            </div>
                            <div class="info-unit">
                                <div class="info-label">
                                    地址
                                </div>
                                <div class="info-value">
                                    <el-form-item prop="sa_address">
                                        <el-input
                                            v-model="formData.sa_address"
                                            type="text"
                                            size="small"
                                            class="info-input" />
                                    </el-form-item>
                                </div>
                            </div>
                            <div class="info-unit">
                                <div class="info-label">
                                    男女比例
                                </div>
                                <div class="info-value">
                                    <el-form-item prop="sexRatio">
                                        <input-range
                                            type="number"
                                            v-model="formData.sexRatio"
                                            spliter=":"
                                            :placeholders="['男必填','女必填']" />
                                    </el-form-item>
                                </div>
                            </div>
                            <div class="info-unit">
                                <div class="info-label">
                                    楼栋数
                                </div>
                                <div class="info-value">
                                    <el-form-item prop="sa_building_count">
                                        <el-input
                                            v-model="formData.sa_building_count"
                                            type="text"
                                            size="small"
                                            class="info-input" />
                                    </el-form-item>
                                </div>
                            </div>
                        </div>
                    </div>
                </el-card>
                <el-card class="box-card">
                    <div
                        slot="header"
                        class="clearfix card-header">
                        <span>场地信息</span>
                    </div>
                    <div
                        class="card-content"
                        :class="{'show-edit': true, 'uneditable-wrap': false }">
                        <div class="info-wrap">
                            <div class="info-unit">
                                <div class="info-label ">
                                    <span>场地大小</span>
                                </div>
                                <div class="info-value">
                                    <el-form-item prop="area">
                                        <input-range
                                            type="number"
                                            v-model="formData.area"
                                            spliter="*"
                                            :placeholders="['必填','必填']" />
                                    </el-form-item>
                                </div>
                            </div>
                            <div class="info-unit">
                                <div class="info-label">
                                    <span>成本价</span>
                                </div>
                                <div class="info-value">
                                    <el-form-item prop="price">
                                        <el-input
                                            v-model="formData.price"
                                            type="number"
                                            size="small"
                                            class="info-input" />
                                    </el-form-item>
                                </div>
                            </div>
                            <div class="info-unit">
                                <div class="info-label">
                                    <span>标签</span>
                                </div>
                                <div class="info-value">
                                    <el-form-item prop="place_type">
                                        <el-select
                                            size="small"
                                            class="info-input"
                                            v-model="formData.place_type"
                                            filterable
                                            allow-create
                                            default-first-option
                                            placeholder="请选择">
                                            <el-option
                                                v-for="item in tags"
                                                :key="item.nam "
                                                :label="item.name"
                                                :value="item.name" />
                                        </el-select>
                                    </el-form-item>
                                </div>
                            </div>

                            <div class="info-unit">
                                <div class="info-label">
                                    参考时间
                                </div>
                                <div class="info-value">
                                    <el-form-item prop="useTime">
                                        <el-time-picker
                                            is-range
                                            class="info-input"
                                            size="small"
                                            :editable="false"
                                            v-model="formData.useTime"
                                            range-separator="至"
                                            start-placeholder="开始时间"
                                            end-placeholder="结束时间"
                                            placeholder="必填"/>
                                    </el-form-item>
                                </div>
                            </div>
                            <div class="info-unit">
                                <div class="info-label">
                                    场地位置
                                </div>
                                <div class="info-value">
                                    <el-form-item prop="place">
                                        <el-input
                                            v-model="formData.place"
                                            type="text"
                                            size="small"
                                            class="info-input" />
                                    </el-form-item>
                                </div>
                            </div>
                            <div class="info-unit">
                                <div class="info-label">
                                    描述
                                </div>
                                <div class="info-value">
                                    <el-form-item prop="desc">
                                        <el-input
                                            v-model="formData.desc"
                                            size="small"
                                            class="info-input" />
                                    </el-form-item>
                                </div>
                            </div>
                            <div class="info-unit full-unit">
                                <div class="info-label">
                                    备注
                                </div>
                                <div class="info-value">
                                    <el-form-item prop="remark">
                                        <el-input
                                            v-model="formData.remark"
                                            resize="none"
                                            :autosize="{ minRows: 1, maxRows: 12}"
                                            type="textarea"
                                            size="small"
                                            class="info-input" />
                                    </el-form-item>
                                </div>
                            </div>
                        </div>
                        <div class="pic-list">
                            <el-form-item prop="picture">
                                <div class="pic-unit">
                                    <div class="pic-label">图片</div>
                                    <div
                                        class="pic-value"
                                        v-for="(item, index) in uploadPreview"
                                        :key="index"
                                        :style="'background-image: url('+item.url+')'">
                                        <div
                                            class="loading"
                                            v-if="item.status=='uploading'">
                                            <el-icon name="loading" />
                                        </div>
                                        <div class="cover">
                                            <el-icon
                                                name="delete"
                                                @click.native="()=>{uploadPreview.splice(index, 1);}" />
                                        </div>
                                    </div>
                                    <el-upload
                                        :multiple="true"
                                        v-if="init"
                                        class="edit-upload-wrapper"
                                        action="https://jsonplaceholder.typicode.com/posts/"
                                        :http-request="fnUpload"
                                        list-type="picture-card"
                                        accept="image/*"
                                        :file-list="uploadPreview"
                                        :show-file-list="false"
                                        :on-success="fnUploadSuccess"
                                        :on-change="fnUploadChange">

                                        <div class="pic-value pic-empty">
                                            <div class="pic-empty-container">
                                                <div class="pic-empty-img" />
                                                <div class="pic-empty-desc">+添加图片</div>
                                            </div>
                                        </div>
                                    </el-upload>
                                </div>
                            </el-form-item>
                        </div>
                    </div>
                </el-card>
            </el-form>
        </div>
        <el-dialog
            width="400px"
            title="添加校区"
            :close-on-click-modal="false"
            :visible.sync="showAddSchoolAreaDialog">
            <el-form
                :rules="addSchoolAreaFormRules"
                :model="addSchoolAreaForm"
                ref="addSchoolAreaForm">
                <el-form-item
                    label="省市"
                    label-width="100">
                    <el-cascader
                        clearable
                        :options="regin"
                        expand-trigger="hover"
                        :change-on-select="true"
                        size="small"
                        :filterable="true"
                        class="info-input"
                        v-model="addSchoolAreaForm.prov_city"
                        :props="{
                            label: 'name',
                            value: 'id',
                            children: 'children'
                        }"
                        @change="fnGetSchools(true)" />
                </el-form-item>
                <el-form-item
                    prop="school_id"
                    label="大学"
                    label-width="100">
                    <el-select
                        size="small"
                        v-model="addSchoolAreaForm.school_id"
                        filterable
                        class="info-input"
                        placeholder="请选择"
                        @change="fnGetSchoolAreas(true)">
                        <el-option
                            v-for="item in addSchoolAreaForm.schools"
                            :key="item.school_id "
                            :label="item.name"
                            :value="item.school_id" />
                    </el-select>
                </el-form-item>
                <el-form-item
                    prop="school_area_name"
                    label="校区名称"
                    label-width="100">
                    <el-input
                        size="small"
                        v-model="addSchoolAreaForm.school_area_name" />
                </el-form-item>
            </el-form>
            <div
                slot="footer"
                class="dialog-footer">
                <el-button
                    size="mini"
                    @click="showAddSchoolAreaDialog = false">取 消</el-button>
                <el-button
                    size="mini"
                    type="primary"
                    @click="fnDoAddSchoolArea">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import regin from '@/assets/js/regin.min.js';
import inputRange from '@/components/common/input-range';
export default {
    components: { inputRange },
    data() {
        var validateArray = (rule, value, callback) => {
            if (!value || value.length < 2|| !value[0] || !value[1]) {
                return callback(new Error(rule.message));
            }
            if(value[0] < 0 || value[1] < 0){
                return callback(new Error('请填写正确的数值'));
            }
            return callback();
        };

        return {
            authResult: {},
            breadcrumbList: [
                {
                    title: "校园工作室管理",
                },
                {
                    title: "场地管理",
                    name: 'PlaceList',
                },
                {
                    title: '新增场地'
                }
            ],
            regin: regin,
            schools: [],
            school_areas: [],
            tags: [{
                name: '快递点',
            },{
                name: '食堂',
            },{
                name: '超市',
            },{
                name: '学校主干道',
            },{
                name: '食堂/学校',
            },{
                name: '学校门口',
            }],

            formData: {
                area_no: '',// 场地id, 空为添加

                prov_city: ['', ''],
                province_id: '',
                city_id: '',
                school_id: '',
                school_area_no: '',
                //校区信息
                sa_student_count: '',
                sa_address: '',
                sa_male_ratio_count: '',
                sa_female_ratio_count: '',
                sa_building_count: '',
                sexRatio: ['', ''],

                //场地信息
                area: ['', ''],
                price: '',
                place_type: '',//标签
                useTime: [this.fnGetDate(), this.fnGetDate()],
                place: '',// 场地位置
                desc: '',
                remark: '',
                picture: '',// 场地图片
            },
            formRule: {
                school_id: [
                    { required: true, message: '请选择学校', trigger: 'change' },
                ],
                school_area_no: [
                    { required: true, message: '请选择学校校区', trigger: 'change' },
                ],
                sa_student_count: [
                    { required: true, message: '请输入校区人数', trigger: 'blur' },
                ],
                sa_address: [
                    { required: true, message: '请输入校区地址', trigger: 'blur' },
                ],
                sexRatio: [
                    { validator: validateArray, message: '请输入校区男女比例', trigger: 'blur' },
                ],
                sa_building_count: [
                    { required: true, message: '请输入校区楼栋数', trigger: 'blur' },
                ],
                area: [
                    { validator: validateArray, message: '请输入场地大小', trigger: 'blur' },
                ],
                price: [
                    { required: true, message: '请输入成本价', trigger: 'blur' },
                ],
                place_type: [
                    { required: true, message: '请输入标签', trigger: 'blur' },
                ],
                useTime: [
                    { validator: validateArray, message: '请选择参考时间', trigger: 'blur' },
                ],
                place: [
                    { required: true, message: '请输入场地位置', trigger: 'blur' },
                ],
                desc: [
                    { required: true, message: '请输入场地描述', trigger: 'blur' },
                ],
                // picture: [
                //     { validator: this.validateUpdatePic, message: '请上传场地图片', trigger: 'blur' },
                // ]
            },

            showAddSchoolAreaDialog: false,
            addSchoolAreaForm: {
                prov_city: ['', ''],
                province_id: '',
                city_id: '',
                school_id: '',
                school_area_no: '',
                school_area_name: '',
                // 添加学校测试
                schools: [{
                    id: '',
                    name: '',
                }],
                school_areas: [{
                    id: '',
                    name: '',
                }],
            },
            addSchoolAreaFormRules: {
                school_id: [{ required: true, message: '请选择学校', trigger: 'blur' }],
                school_area_name: [{ required: true, message: '请输入校区名称', trigger: 'blur' }],
            },
            // 图片上传结果列表
            uploadPreview: [],
            // 标记是否初始化完成,完成后显示图片上传组件, 方便初始化数据
            init: false,
            saving: false
        };
    },
    methods: {
        validateUpdatePic(rule, value, callback){
            if(!this.uploadPreview || this.uploadPreview.length <= 0){
                return callback(new Error(rule.message));
            }
            return callback();
        },
        /** 获取学校列表 */
        fnGetSchools(isAddSchoolArea) {
            let data = {};

            if (isAddSchoolArea) {
                data = {
                    pid: this.addSchoolAreaForm.prov_city.length > 0 ? this.addSchoolAreaForm.prov_city[0] : '',
                    cid: this.addSchoolAreaForm.prov_city.length > 1 ? this.addSchoolAreaForm.prov_city[1] : '',
                };
            } else {
                data = {
                    pid: this.formData.prov_city.length > 0 ? this.formData.prov_city[0] : '',
                    cid: this.formData.prov_city.length > 1 ? this.formData.prov_city[1] : '',

                };
            }

            this.$post('/ht/localinfo%5Cschool%5Cget_list', data, resp => {
                if (resp.code == 1) {
                    if (isAddSchoolArea) {
                        this.addSchoolAreaForm.schools = resp.data.list;
                    } else {
                        this.schools = resp.data.list;
                    }
                } else {
                    // this.$message({
                    //     center: true,
                    //     type: 'warning',
                    //     message: resp.msg
                    // });
                }
            });
        },
        /** 获取校区列表 */
        fnGetSchoolAreas() {
            if (!this.formData.school_id) {
                this.school_areas = [];
                return;
            }
            this.$post('/ht/roadshow%5Cschool_area%5Cget_list', {
                school_id: this.formData.school_id
            }, resp => {
                if (resp.code == 1) {
                    this.school_areas = resp.data.list;
                } else {
                    this.$message({
                        center: true,
                        type: 'warning',
                        message: resp.msg
                    });
                }
            });
        },
        fnGetSchoolArea() {
            if (!this.formData.school_area_no) {
                return;
            }
            this.$post('/ht/roadshow%5Cschool_area%5Cget', {
                school_area_no: this.formData.school_area_no
            }, resp => {
                if (resp.code == 1) {
                    if (!this.formData.prov_city || this.formData.prov_city.length < 2 || !this.formData.prov_city[1]) {
                        this.formData.prov_city = [resp.data.pid, resp.data.cid];
                    }
                    this.formData.school_id = resp.data.school_id;
                    this.formData.sexRatio = [resp.data.male_ratio_count, resp.data.female_ratio_count];
                    this.formData.sa_student_count = resp.data.student_count;
                    this.formData.sa_building_count = resp.data.building_count;
                    this.formData.sa_address = resp.data.address;
                } else {
                    this.$message({
                        center: true,
                        type: 'warning',
                        message: resp.msg
                    });
                }
            });
        },
        /** 显示添加校区弹窗 */
        fnShowAddSchoolAreaDialog() {
            this.addSchoolAreaForm.prov_city = this.formData.prov_city;
            this.addSchoolAreaForm.school_id = this.formData.school_id;
            this.fnGetSchools(true);
            this.showAddSchoolAreaDialog = true;
        },
        fnDoAddSchoolArea() {
            this.$refs.addSchoolAreaForm.validate(valid => {
                if (valid) {
                    this.$post('/ht/roadshow%5Cschool_area%5Cadd', {
                        school_id: this.addSchoolAreaForm.school_id,
                        school_area_name: this.addSchoolAreaForm.school_area_name
                    }, resp => {
                        if (resp.code == 1) {
                            this.addSchoolAreaForm.school_area_no = resp.data.school_area_no;
                            this.showAddSchoolAreaDialog = false;

                            // 回填新增表格
                            this.formData.prov_city = this.addSchoolAreaForm.prov_city;
                            this.formData.school_id = this.addSchoolAreaForm.school_id;
                            this.fnGetSchoolAreas();
                            this.formData.school_area_no = this.addSchoolAreaForm.school_area_no;
                        } else {
                            this.$message({
                                center: true,
                                type: 'warning',
                                message: resp.msg
                            });
                        }
                    });
                }
            });
        },
        fnGetDate(val){
            if(val){
                return new Date(val * 1000);
            }
            let currDate = new Date();

            currDate.setHours(0);
            currDate.setMinutes(0);
            currDate.setSeconds(0);
            return currDate;
        },
        /** 获取场地信息 */
        fnGetArea() {
            if (!this.formData.area_no) {
                return;
            }
            this.$post('/ht/roadshow%5Carea%5Cget', {
                area_no: this.formData.area_no
            }, resp => {
                if (resp.code == 1) {
                    if (!this.formData.prov_city || this.formData.prov_city.length < 2 || !this.formData.prov_city[1]) {
                        this.formData.prov_city = [resp.data.pid, resp.data.cid];
                    }
                    this.formData.prov_city = [resp.data.school_area.pid, resp.data.school_area.cid];
                    this.fnGetSchools();
                    this.formData.school_id = resp.data.school_area.school_id;
                    this.fnGetSchoolAreas();
                    this.formData.school_area_no = resp.data.school_area_no;
                    this.formData.sexRatio = [resp.data.school_area.male_ratio_count, resp.data.school_area.female_ratio_count];
                    this.formData.sa_student_count = resp.data.school_area.student_count;
                    this.formData.sa_building_count = resp.data.school_area.building_count;
                    this.formData.sa_address = resp.data.school_area.address;

                    // 场地信息
                    this.formData.area = [resp.data.area_length, resp.data.area_width];
                    this.formData.price = resp.data.price;
                    this.formData.place_type = resp.data.place_type;//标签
                    this.formData.useTime = [this.fnGetDate(resp.data.use_start_time), this.fnGetDate(resp.data.use_end_time)];
                    this.formData.place = resp.data.place;// 场地位置
                    this.formData.remark = resp.data.remark;
                    this.formData.desc = resp.data.desc;
                    // this.formData.picture = resp.data.picture;// 场地图片
                    this.uploadPreview = [];// 场地图片
                    for(var i in resp.data.picture){
                        this.uploadPreview.push({
                            url: resp.data.picture[i],
                            uploadUrl: resp.data.picture[i]
                        });
                    }
                    setTimeout(() => {
                        this.$refs.mainform.clearValidate();
                    }, 100);
                    // 初始化标记, 初始化完成后才显示上传组件
                    this.init = true;
                } else {
                    this.$message({
                        center: true,
                        type: 'warning',
                        message: resp.msg
                    });
                    setTimeout(() => {
                        this.fnGoList();
                    }, 1000);
                }
            });
        },
        fnClear() {
            if (!this.formData.area_no) {

                this.formData.prov_city = ['', ''];
                this.formData.province_id = '';
                this.formData.city_id = '';
                this.formData.school_id = '';
                this.formData.school_area_no = '';
                //校区信息
                this.formData.sa_student_count = '';
                this.formData.sa_address = '';
                this.formData.sa_male_ratio_count = '';
                this.formData.sa_female_ratio_count = '';
                this.formData.sa_building_count = '';
                this.formData.sexRatio = ['', ''];

            }
            this.formData.area = ['', ''];
            this.formData.price = '';
            this.formData.place_type = '';//标签
            this.formData.useTime = [this.fnGetDate(), this.fnGetDate()];
            this.formData.place = '';// 场地位置
            this.formData.desc = '';
            this.formData.remark = '';
            this.formData.picture = [];// 场地图片
            this.uploadPreview = [];// 场地图片
            this.$refs['mainform'].resetFields();
        },
        fnGetTimeStamp(time){
            if(time){
                return Date.parse(time)/1000;
            }
            return '';
        },
        /** 保存表单 */
        fnSave() {
            if(this.saving){
                return ;
            }
            let url = '';
            let imgTmp = [];

            for(var i in this.uploadPreview){
                if(this.uploadPreview[i].status != 'success'){
                    this.$message({
                        type: 'warning',
                        center: true,
                        message: '请等待图片上传完毕'
                    });
                    return ;
                }
                imgTmp.push(this.uploadPreview[i].uploadUrl);
            }
            this.formData.picture = JSON.stringify(imgTmp);

            this.$refs['mainform'].validate(valid => {
                if(!valid){
                    return ;
                }
                this.formData.sa_male_ratio_count = this.formData.sexRatio[0];
                this.formData.sa_female_ratio_count = this.formData.sexRatio[1];
                this.formData.area_length = this.formData.area[0];
                this.formData.area_width = this.formData.area[1];
                this.formData.use_start_time = this.fnGetTimeStamp(this.formData.useTime[0]);
                this.formData.use_end_time = this.fnGetTimeStamp(this.formData.useTime[1]);
                if (this.formData.area_no) {
                    url = '/ht/roadshow%5Carea%5Cedit';
                } else {
                    url = '/ht/roadshow%5Carea%5Cadd';
                }
                let data = {
                    area_no: this.formData.area_no,
                    school_area_no: this.formData.school_area_no,
                    sa_student_count: this.formData.sa_student_count,
                    sa_male_ratio_count: this.formData.sa_male_ratio_count,
                    sa_female_ratio_count: this.formData.sa_female_ratio_count,
                    sa_building_count: this.formData.sa_building_count,
                    sa_address: this.formData.sa_address,
                    area_length: this.formData.area_length,
                    area_width: this.formData.area_width,
                    use_start_time: this.formData.use_start_time,
                    use_end_time: this.formData.use_end_time,
                    desc: this.formData.desc,
                    place_type: this.formData.place_type,
                    price: this.formData.price,
                    place: this.formData.place,
                    remark: this.formData.remark,
                    picture: this.formData.picture,
                };

                this.saving = true;
                this.$post(url, {
                    area_no: this.formData.area_no,
                    school_area_no: this.formData.school_area_no,
                    sa_student_count: this.formData.sa_student_count,
                    sa_male_ratio_count: this.formData.sa_male_ratio_count,
                    sa_female_ratio_count: this.formData.sa_female_ratio_count,
                    sa_building_count: this.formData.sa_building_count,
                    sa_address: this.formData.sa_address,
                    area_length : this.formData.area_length,
                    area_width : this.formData.area_width,
                    use_start_time : this.formData.use_start_time,
                    use_end_time : this.formData.use_end_time,
                    desc : this.formData.desc,
                    place_type : this.formData.place_type,
                    price : this.formData.price,
                    place : this.formData.place,
                    remark : this.formData.remark,
                    picture : this.formData.picture,
                }, resp => {
                    this.$message({
                        type: 'success',
                        center: true,
                        message: '保存成功'
                    });
                    this.fnGoList();
                });
            });
        },
        /** 上传组件回调 文件队列修改 */
        fnUploadChange(file, fileList) {
            // this.dialogEditData.form_data[fieldName] = fileList;
            this.uploadPreview = fileList;
        },
        /** 上传组件回调 上传成功 */
        fnUploadSuccess(resp, file, fileList) {
            file.uploadUrl = resp.url;
        },
        fnUpload(e) {
            let pic = new FormData();

            pic.append('file', e.file);
            this.$upload({
                url: '/__local/common%5Cupload',
                data: pic,
                progress: e.onProgress,
                success: resp => {
                    if (resp.code == 1) {
                        // 调用组件成功回调,修改样式
                        e.onSuccess(resp.data, {
                            url: resp.data.url
                        }, this.fileList);
                    } else {
                        // 失败后调用组件error回调,删除对应元素
                        e.onError(resp.msg);
                        this.$message({
                            type: 'warning',
                            message: '上传图片失败',
                            cneter: true
                        });
                    }
                }
            });
        },
        fnGoList(){
            this.$router.push({
                name: 'PlaceList'
            });
        }
    },
    created() {
        this.authResult = this.$route.meta.authResult;
        this.formData.area_no = this.$route.query.area_no ? this.$route.query.area_no : '';

        if(this.formData.area_no){
            this.$set(this.breadcrumbList, 2, {
                title: '编辑场地'
            });
        }
        this.$store.commit('SET_HEADER', this.breadcrumbList);

        if (this.formData.area_no) {
            this.fnGetArea();
        } else {
            // 初始化标记, 初始化完成后才显示上传组件
            this.init = true;
            this.fnGetSchools();
        }
    },
    mounted() {
    }
};

</script>

<style lang="less" scoped>
    .btn-nopadding {
      padding: 0;
    }
    .container {
      display: flex;
      flex-direction: column;
    }
    .details-base-container {
      position: absolute;
      width: 100%;
      height: 100%;
    }
    .operate-bar {
      position: relative;
      text-align: right;
      padding: 12px 20px;
      background: #fff;
      box-shadow: 0 1px 0 0 rgba(200, 200, 200, 0.5);
      z-index: 1;
    }
    .base-main {
      width: 100%;

      height: calc(100% - 56px);
      padding: 15px;
      overflow: auto;
      box-sizing: border-box;
      &.no-operater {
        height: calc(100%);
      }
    }
    .box-card {
      margin-bottom: 26px;
    }
    .card-header span {
      font-size: 16px;
      font-weight: bold;
      color: rgba(0, 0, 0, 0.85);
      line-height: 24px;
    }
    .info {
      &-unit {
        width: 33%;
        text-align: left;
        min-width: 300px;
        padding: 0;
        box-sizing: border-box;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: flex-start;
        margin-bottom: 0;
      }
      &-unit:nth-child(3n) {
        padding-left: 8%;
      }
      &-unit:nth-child(3n + 1) {
        padding-right: 8%;
      }
      &-unit:nth-child(3n + 2) {
        padding-left: 4%;
        padding-right: 4%;
      }
      &-label {
        margin-bottom: 5px;
        width: 100%;
        display: inline-block;
        font-size: 14px;
        font-weight: 400;
        color: rgba(0, 0, 0, 0.85);
        line-height: 22px;
        display: flex;
        justify-content: space-between;
        align-items: center;
      }
      &-value {
        width: 100%;
        flex: 1;
        display: inline-block;
        font-size: 14px;
        font-weight: 400;
        color: rgba(0, 0, 0, 0.75);
        line-height: 22px;
      }
      &-input {
        width: 100%;
      }

      &-wrap {
        box-sizing: border-box;
        display: flex;
        flex-wrap: wrap;
        min-width: 900px;
        .full-unit {
          width: 100%;
          padding: 0;
          padding-right: 1%;
        }
      }
    }
    .pic {
      &-list {
        width: 100%;
      }
      &-unit {
        position: relative;
        margin-bottom: 12px;
        .edit-upload-wrapper {
          display: inline-block;
          vertical-align: top;
          width: 240px;
          height: 165px;
          .el-upload--picture-card {
            width: 240px;
            height: 185px;
          }
        }
      }
      &-label {
        font-size: 14px;
        font-weight: 500;
        color: rgba(0, 0, 0, 0.85);
        line-height: 22px;
      }
      &-value {
        display: inline-block;
        width: 240px;
        height: 165px;
        background-position: center;
        background-size: contain;
        background-repeat: no-repeat;
        margin-top: 12px;
        width: 240px;
        height: 165px;
        margin-right: 40px;
        border: 1px solid rgba(51, 120, 222, 0.21);
        position: relative;
        &:hover {
          .cover {
            opacity: 1;
          }
          .loading {
            opacity: 0;
          }
        }
        .cover {
          position: absolute;
          top: 0;
          left: 0;
          right: 0;
          bottom: 0;
          text-align: center;
          background-color: rgba(0, 0, 0, 0.8);
          opacity: 0;
          transition: all 0.5s;

          .el-icon-delete {
            cursor: pointer;
            font-size: 26px;
            color: #fff;
            line-height: 165px;
          }
        }
        .loading {
          position: absolute;
          top: 0;
          left: 0;
          right: 0;
          bottom: 0;
          text-align: center;
          background-color: rgba(0, 0, 0, 0.8);
          opacity: 1;
          transition: all 0.5s;

          .el-icon-loading {
            font-size: 26px;
            color: #fff;
            line-height: 165px;
          }
        }
      }
      &-empty {
        position: relative;
        background: rgba(255, 255, 255, 1);
        border: 1px solid rgba(51, 120, 222, 0.21);
        &-container {
          position: absolute;
          left: 50%;
          top: 50%;
          transform: translate(-50%, -50%);
          text-align: center;
        }
        &-img {
          width: 53px;
          height: 42px;
          margin: 0 auto;
          background-position: center;
          background-size: cover;
          background-repeat: no-repeat;
          background-image: url(//cdn.zsdx.cn/admin/images/student/pic-empty.png);
        }
        &-desc {
          margin-top: 8px;
          font-size: 14px;
          font-weight: 400;
          color: rgba(0, 0, 0, 0.3);
          line-height: 20px;
          text-align: center;
        }
      }
    }
    .base-view {
      display: inline;
      line-height: 22px;
    }
    .base-input {
      display: none;
      line-height: 22px;
      font-size: 14px;
      color: rgba(0, 0, 0, 0.65);
    }
    .show-edit {
      .base-view {
        display: none;
      }
      .base-input {
        display: inline;
      }
      .uneditable {
        opacity: 0.5;
        .base-view {
          display: inline;
        }
        .base-input {
          display: none;
        }
      }
    }
    .uneditable-wrap {
      .base-view {
        display: inline;
      }
      .base-input {
        display: none;
      }
      .info-unit {
        opacity: 0.5;
      }
    }
</style>
<style lang="less">
    .edit-place-container {
      .el-upload--picture-card {
        border: 0;
        background-color: transparent;
      }
      .el-form-item {
        margin-bottom: 16px;
      }
      .el-date-editor--daterange.el-input__inner{
          width: 100%;
      }
    }
</style>